<!DOCTYPE html>
<!-- saved from url=(0038)http://photo-test-community.shijue.me/ -->
<html class="home_index">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>oAuth认证</title>
    <meta property="wb:webmaster" content="1788669383376c28">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" name="viewport">
    <meta content="照片,摄影师,摄影作品集,在线摄影作品集,照片精选,网络摄影作品集,在线照片展廊,分享图片,专业摄影,社会摄影,上传照片,分享照片,出色的摄影作品集,摄影社区,最新摄影作品,快速创建作品集,模特和摄影师,商业摄影,建筑摄影,专业作品集管理"
          name="keywords">
    <meta content="上传、分享和发现鼓舞人心的照片。" name="description">
    <link rel="shortcut icon" href="/images/favicon_n.ico"
          type="/image/vnd.microsoft.icon">
    <link href="/style/oauth.css"
          rel="stylesheet">
    <script src="/webjars/jquery/1.12.2/jquery.js"></script>
    <script src="/webjars/angularjs/1.4.8/angular.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script>
        var ismobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone|iPod|iPad/i) ? !0 : !1;
        var tipPosition = 2;
        var tipColor = '#FF9901';
        if (ismobile) {
            tipPosition = 1;
        }
        function checkUsername() {
            var username = $("#username").val().trim();//用户名
            username = username.replace(/[ ]/g, '');
            $("#username").val(username);
            var noteStr = '';//用户名的提示信息
            if (username == null || username == '') {
                noteStr = '请输入手机号码或电子邮箱';
                layer.tips(noteStr, '#username', {tips: [tipPosition, tipColor]});
                return false;
            }
            //1.校验手机号
            if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(username)) && !(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,5})+$/.test(username))) {
                noteStr = "手机号码或电子邮箱格式有误";
                layer.tips(noteStr, '#username', {tips: [tipPosition, tipColor]});
                return false;
            }
            return true;
        }
        function checkPassword() {
            if (!$("#password").val()) {
                layer.tips("密码不能为空", '#password', {tips: [tipPosition, tipColor]});
                return false;
            }
            return true;
        }

        function switchAccount() {
            $(".logged-region").hide();
            $(".show_on_email").show();
        }

        function loged() {
            $(".logged-region").show();
            $(".show_on_email").hide();
        }
    </script>
</head>
<body class="scrolled loaded" ng-app="oauthApp">

<div class="page-oauth" ng-controller="oauthController">
    <div class="oauth-region">
        <div class="oauth-head-region">
            <span class="community-logo">

            </span>
            <span class="head-region-title">
                快捷登录
            </span>
        </div>
        <div class="oauth-tip-region">
            <span class="tip-region-com"> {{company}} </span> 将会获得您的昵称和头像
        </div>
        <div class="oauth-login-region">
            <div class="login-form">
                <div class="show_on_email" style="display: none">
                    <form id="login-form-oauth" method="post" action="/login" class="signup_with_email">
                        <ul>
                            <li>
                                <input id="username" type="text" placeholder="手机号码或电子邮件" onblur="checkUsername()"
                                       name="username" ng-model="username" class="field email">
                            </li>
                            <li>
                                <input id="password" type="password" placeholder="密码" name="password"
                                       ng-model="password"
                                       class="field password">
                            </li>
                            <li>
                                <button type="submit" id="subButton" ng-disabled="submitButton"
                                        class="button submit large login_only">登录
                                </button>
                            </li>


                        </ul>
                    </form>
                    <div class="login-form-footer">
                        <a href="http://500px.me/user/findPwd?redirect=http://500px.me/community/index.html"
                           target="_blank">
                            <span class="float-left font-blue">
                                忘记密码？
                            </span>
                        </a>
                        <span class="float-right">
                                还不是会员?<a
                                href="http://500px.me/user/registerMe?redirect=http://500px.me/community/index.html"
                                target="_blank"><span class="font-blue register-link">注册</span></a>
                         </span>

                    </div>
                </div>
                <div class="logged-region">
                    <div class="logged-user-info">
                        <a href="javascript:void(0)" ng-click="authorize()" class="face">
                            <div class="user-img-container">
                                <img ng-src="{{user.image}}" width="80" alt="" class="face-img">
                            </div>
                            <span class="nick-name">{{user.username}}</span>
                        </a>
                        <input type="button" ng-click="authorize()" value="授权" class="button-oauth">
                        <span class="switch-account font-blue" ng-click="logout()">
                            换一个账号
                        </span>
                    </div>
                </div>
                <form id="confirmationForm" name="confirmationForm" action="/oauth/authorize" method="post">
                    <input name="user_oauth_approval" value="true" type="hidden">
                    <input type="hidden" name="scope.openid" value="true">
                    <input name="authorize" value="Authorize" type="hidden">
                </form>

            </div>
        </div>
    </div>


</div>

<script>
    var oauthApp = angular.module("oauthApp", [])
            .config(["$httpProvider", function ($httpProvider) {
                //这个定制的 "X-Requested-With"是由浏览器客户端发送的约定的消息头,
                // 而它之前在Angular中是默认有的，不过在 1.3.0 中被拿掉了。
                // Spring Security 会对其进行响应，在一个401响应中不发送 "WWW-Authenticate" 消息头,
                // 而这样浏览器就不会弹出一个认证对话框了 (这种效果是我们想要的，因为我们想要对认证过程进行控制)。
                $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
            }]);
    oauthApp.controller("oauthController", function ($scope, $location, $http) {
        var authenticate = function () {
            $http.get("/user")
                    .success(function (response, status, headers) {
                        if (headers("Content-Type") == 'application/json;charset=UTF-8' && response.username != null) {
                            $scope.changeImage(response);
                        } else {
                            switchAccount();
                        }
                    })
                    .error(function (response, status) {
                        switchAccount();

                        $scope.submitButton = false;
                    })
        }
        authenticate();

        $scope.login = function () {
            if ($scope.validateForm()) {
                var headers = {authorization: "Basic " + btoa($scope.username + ":" + $scope.password)};
                $http.get("/user", {headers: headers})
                        .success(function (response, status, headers) {
                            if (headers("Content-Type") == 'application/json;charset=UTF-8' && response.username != null) {
                                $scope.changeImage(response);
                                $scope.redirectAuthorize();
                            } else {
                                $scope.submitButton = false;
                            }

                        })
                        .error(function (response, status) {
                            if (status == 401) {
                                $scope.submitButton = false
                                //正上方
                                layer.msg("用户名或密码错误!", {
                                    offset: 0,
                                    shift: 6
                                });
                            }
                        })
            }
        }

        $scope.changeImage = function (user) {
            $scope.user = user;
            if ($scope.user.image == null) {
                $scope.user.image = '/images/head_empty.jpg'
            }
        }

        $scope.authorize = function () {
            if ($scope.redirectUrl) {
                window.location = $scope.redirectUrl;
                $("#confirmationForm").submit();
            } else {
                loged();
                //正上方
                layer.msg("未发现授权网站!", {
                    offset: 0,
                    shift: 6
                });
            }
        }

        $scope.redirectAuthorize = function () {
            if ($scope.redirectUrl) {
                window.location = $scope.redirectUrl;
            } else {
                loged();
                //正上方
                layer.msg("未发现授权网站!", {
                    offset: 0,
                    shift: 6
                });
            }
        }

        $http.get("/user/company")
                .success(function (response) {
                    $scope.company = response.company;
                    $scope.redirectUrl = response.redirectUrl;
                    $scope.loginType = response.loginType;
                })

        $scope.validateForm = function () {
            $scope.submitButton = true;
            if (!checkUsername() || !checkPassword()) {
                $scope.submitButton = false
                return false;
            }
            return true;
        }

        $scope.logout = function () {
            $scope.redirectUrl = $location.absUrl();
            $http.get("/logout")
                    .success(function () {
                        $scope.submitButton = false
                        switchAccount();
                    })
                    .error(function () {
                        $scope.submitButton = false
                        switchAccount();
                    })
        }
    })

</script>

</body>
</html>